<template>
    <h1>编辑会员</h1>
    <div>
        <table border="1">
            <tbody>
                <tr>
                    <th>名称</th>
                    <th>
                        <input type="text" v-model="data.Name">
                    </th>
                </tr>
                <tr>
                    <th>密码</th>
                    <th>
                        <input type="password" v-model="data.Pwd">
                    </th>
                </tr>
                <tr>
                    <th>年龄</th>
                    <th>
                        <input type="text" v-model="data.Age">
                    </th>
                </tr>
                <tr>
                    <th>图片</th>
                    <th>
                        <input type="file" @change="Up">
                        <img :src="'https://localhost:7147/'+data.Img" style="width: 100px; height: 100px;" >
                    </th>
                </tr>
                <tr>
                    <th>会员等级</th>
                    <th>
                        <select v-model="data.LevelId">
                            <option value="0">请选择</option>
                            <option v-for="h in level" :value="h.LevelId" >{{ h.LevelName }}</option>
                        </select>
                    </th>
                </tr>
                <tr>
                    <th>状态</th>
                    <th>
                        <input type="checkbox" v-model="data.State">选中启用不选择禁用
                    </th>
                </tr>
                <tr>
                    <th>
                        <input type="button" value="修改" @click="Udate">
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
const data=ref({
    "Id": 0,
  "Name": "",
  "Pwd": "",
  "Age": 0,
  "Img": "string",
  "LevelId": 0,
  "State": true,
  "Delete": true
})

const Up=(e:any)=>{
     var f=e.target.files[0];
     var fd=new FormData();

     fd.append("file",f);

    if(f.size>1024*1024*2){
        alert('图片大小不能超过2mb');
        return;
    }
    if(f.type!="image/jpeg" && f.type!="image/png"){
        alert('图片格式不正确');
        return 
    }


     axios.post("https://localhost:7147/api/Upload/Up",fd).then(res=>{
        data.value.Img=res.data;
     })



}


onMounted(()=>{
    GetLevels();
})

const level=ref([{
"LevelId": 1,
    "LevelName": "",
    "LevelState": false,
    "RightName": "",
    "RightId": 1,
    "LevelDelete": true
}])


const GetLevels=()=>{
    axios.get("https://localhost:7147/api/Member/GetLevelsss",{params:level.value}).then(res=>{
        level.value=res.data;
    })
}

onMounted(()=>{
    Detail()
})

const routere=useRoute();

const Detail=()=>{
    var val=routere.query.Id;
    axios.get("https://localhost:7147/api/Member/DetailMember",{params:{Id:val}}).then(res=>{
        data.value=res.data;
    })
}

const r=useRouter();

const Udate=()=>{
    axios.put("https://localhost:7147/api/Member/UpdateMember",data.value).then(res=>{
        if(res.data>0){
            alert('修改成功')
            r.push({path:'/ShowMemberView'})
        }
        else{
            alert('修改失败')
        }
    })
}



</script>

